<template>
    <div style="padding: 10px;">
      
     
        <el-form :inline="true" :model="inbound" class="demo-form-inline">
          <el-form-item label="出库单号:" >
            <el-input v-model="inbound.orderId" placeholder="请输入出库单号"  />
          </el-form-item>
          <el-form-item label="客户:">
            <el-input v-model="inbound.userName" placeholder="请输入客户名字"  />
          </el-form-item> 
          <el-form-item label="品牌:">
            <el-input v-model="inbound.brandName" placeholder="请输入品牌"  />
          </el-form-item> 
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="getList">搜索</el-button>
            <el-button :icon="Refresh" @click="reset">重置</el-button>          
          </el-form-item>
        </el-form>
  
        <el-button type="primary" :icon="Plus" @click="add">新增出库单</el-button>
        
  
      
      <div style="padding: 15px;">
        <el-table :data="tableData" style="width: 100%" @selection-change="change">
         
            <el-table-column :align="'center'" prop="orderId" label="出库单号"  />
            <el-table-column :align="'center'" width="120px"  prop="orderDate" label="出库日期"  />
            <el-table-column :align="'center'" prop="customerId" label="客户编号" />
            <el-table-column prop="user.username" label="客户姓名" />
            <el-table-column :align="'center'" prop="brand.brandId" label="品牌编号"  />
            <el-table-column prop="brand.brandName" label="品牌名字"  />
            <el-table-column prop="brand.specification" label="规格"  />
            <el-table-column prop="quantity" label="数量" />
            <el-table-column prop="price" label="价格"  />
            <el-table-column  prop="permission" label="状态"  />
            <el-table-column prop="operate" label="操作" width="200px">
                
              <template #default="{row}">
                <el-button type="success" :icon="Select" size="small" @click.prevent="update(row)" >通过</el-button>
                <el-button type="danger" :icon="CloseBold" size="small" @click.prevent="remove(row)"  >驳回</el-button>
              </template>
            </el-table-column>
        </el-table>
      </div>
    
      <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="30%"
      :before-close="handleClose"
    >
      <span>This is a message</span>
      
    </el-dialog>
    
    </div>

    <el-dialog v-model="dialogFormVisible"  title="添加出库单" width="30%" >
      <el-form :model="form" label-width="100px">
        
        <el-form-item label="单据类型:">
        <el-select v-model="form.orderType" clearable placeholder="Item Type">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
        </el-select>
                        
                      <!-- 出库单 -->
      </el-form-item>
        <el-form-item label="出库日期:">
          <el-date-picker v-model="form.orderDate" type="date" placeholder="请选择日期" clearable/>
          <!-- <el-input v-model="form.order_date" autocomplete="off" /> -->
        </el-form-item>
        <el-form-item label="客户ID:">
          <el-select v-model="form.user.userId " placeholder="Select">
              <el-option
                v-for="item in users"
                :key="item.userId"
                :label="item.username"
                :value="item.userId"
              >
                <span style="float: left">{{ item.userId }}</span>
                <span
                  style="
                    float: right;
                    color: var(--el-text-color-secondary);
                    font-size: 13px;
                  "
                  >{{ item.username }}</span
                >
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="品牌">
          <el-select v-model="form.brand.brandId " placeholder="Select">
              <el-option
                v-for="item in brands"
                :key="item.brandId"
                :label="item.brandName"
                :value="item.brandId"
              >
                <span style="float: left">{{ item.brandId }}</span>
                <span
                  style="
                    float: right;
                    color: var(--el-text-color-secondary);
                    font-size: 13px;
                  "
                  >{{ item.brandName }}</span
                >
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="form.quantity" autocomplete="off" />
        </el-form-item>
        <el-form-item label="出库价格">
          <el-input v-model="form.price" autocomplete="off" />
        </el-form-item>      
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="save">确认</el-button>
        </span>

      </template>
    </el-dialog>

    <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="inbound.current"
      v-model:page-size="inbound.size"
      :page-sizes="[4 ,5 , 6, 7]"
      background
      layout="total,sizes, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!--       :small="small"
      :disabled="disabled" -->
  </div>
  
  </template>
  
  <script setup>
  import router from '@/router'
  import {reactive,ref,onMounted} from 'vue'
  import {Search,Refresh,Plus,Delete,EditPen,Select,CloseBold} from '@element-plus/icons-vue'
  import {getCategory,getBrands,getUsers,addOrder,updateOrder,deleteEntity} from '@/apis/out'

  const inbound = ref({
    current: 1,
    size: 4,
    orderId:'',
    userName:'',
    brandName:''
  })
  const brands=ref([{}])
  const users=ref([{}])
  const size=ref()
  const total=ref()
  const form=ref({})
  const tableData= ref([{}])
  const getList= async()=>{
    const res=await getCategory(inbound.value)
    console.log(res.data.records);
    size.value=res.data.size
    total.value=res.data.total
    console.log('10086')
    console.log(res.data.records)
    tableData.value=res.data.records
    console.log(tableData.value);

  }
  onMounted(()=>getList())


  const dialogFormVisible =ref(false)
  
  
  const outOrder=ref({
      orderId:'',
      orderDate:'',
      customerId:'',
      brandId:'',
      orderType:'',
      quantity:'',
      price:'',
      permission:''
  })

  const add=async()=>{
    const res=await getBrands()
    const res1=await getUsers()
    const nullForm=ref({
      orderId:'',
      orderType: '',
      user: {userId:'',username:''},
      brand: {brandId:'',brandName:'',specification:''},
      quantity:'',
      price:'',
      permission:''
  })
    console.log(res);
    brands.value=res.data
    users.value=res1.data
    form.value=nullForm.value;
    dialogFormVisible.value=true

  }
  const uppermission=ref([])
  const removeList=ref([]);

  const update=async(row)=>{
    ElMessageBox.confirm(
    '您确定驳回吗?',
    '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '离开',
      type: '警告',
    }
  )
    .then(async () => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
      outOrder.value.orderId=row.orderId;
  outOrder.value.orderDate=row.orderDate;
  outOrder.value.customerId=row.user.userId;
  outOrder.value.brandId=row.brand.brandId;
  outOrder.value.orderType=row.orderType;
  outOrder.value.quantity=row.quantity;
  outOrder.value.price=row.price;
    outOrder.value.permission="通过";
    await updateOrder(outOrder.value);
    await getList();
    
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
    
  
    
  }



  const remove=async(row)=>{
    ElMessageBox.confirm(
    '您确定驳回吗?',
    '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '离开',
      type: '警告',
    }
  )
    .then(async () => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
      outOrder.value.orderId=row.orderId;
  outOrder.value.orderDate=row.orderDate;
  outOrder.value.customerId=row.user.userId;
  outOrder.value.brandId=row.brand.brandId;
  outOrder.value.orderType=row.orderType;
  outOrder.value.quantity=row.quantity;
  outOrder.value.price=row.price;
    outOrder.value.permission="未通过";
    await updateOrder(outOrder.value);
    await getList();
    
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
    
  
    
  }
  const find=()=>{
   
  }
  
  // 获取复选框一行的数据
  const change=(val)=>{
    removeList.value=val
  }
  
  

const options = [
  {
    value: '销售出库',
    label: '销售出库',
  },
  {
    value: '采购退货出库',
    label: '采购退货出库',
  },
  {
    value: '其它出库',
    label: '其他出库',
  },
]
  
const handleSizeChange = (val) => {
   inbound.value.size=val
  getList()
}
const handleCurrentChange = (val) => {
  inbound.value.current=val
  getList()
}
const addOutOrder=async(outOrder)=>{
  outOrder.value.orderId=form.value.orderId;
  outOrder.value.orderDate=form.value.orderDate;
  outOrder.value.customerId=form.value.user.userId;
  outOrder.value.brandId=form.value.brand.brandId;
  outOrder.value.orderType=form.value.orderType;
  outOrder.value.quantity=form.value.quantity;
  outOrder.value.price=form.value.price;
  console.log(outOrder);
  console.log(outOrder.value.orderId);
  if(outOrder.value.orderId==null||outOrder.value.orderId==""){
    const res=await addOrder(outOrder.value)
    await getList()
  }else{
    const res=await updateOrder(outOrder.value)
    await getList()
  }
  
}
const save=()=>{
  console.log(form.value);
  outOrder.value.permission="审核中"
  addOutOrder(outOrder);
  dialogFormVisible.value=false
}
const reset=()=>{
  inbound.value.orderId='';
  inbound.value.userName='';
  inbound.value.brandName='';
  getList();
}
  </script>